<!--
 * @Author: fengxx
 * @Date: 2025-09-05 09:19:27
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-10 18:37:45
-->
<script setup lang="ts">
import { onMounted } from 'vue'

// import { onMounted } from 'vue'

// import { useRoute, useRouter } from 'vue-router'
// const router = useRouter() // $router  // 路由实例
// const route = useRoute() // $route  // 当前路由的实例

onMounted(async () => {
  //   await router.isReady()
  //   // console.log(route)
  //   // const url = router.resolve({ name: 'about', params: { aboutId: [1,2] } }).href
  //   // router.push(url)
  // console.log(typeof null)
  // let a = 1
  // ++在前，先自增再赋值；++在后，先赋值再自增
  // const b = a++
  // console.log(a, b)
  // type Keys = 'a' | 'b'
  // type Obj = { [K in Keys]: string }
  // const obj: Obj = { a: 'hello', b: 'world' }
  // console.log(obj)
  // const a = { name: 'Alice' }
  // const b = a
  // b.name = 'Bob'
  // console.log(a.name)
  // console.log(1)
  // setTimeout(() => console.log(2), 0)
  // Promise.resolve().then(() => console.log(3))
  // console.log(4)
  // interface A {
  //   name?:string,
  //   age: number
  // }
  // const obj:A = {
  //   name: 'kkk',
  //   age:1
  // }
  // console.log(+'5' + 3)
  // console.log([] == false)
})
</script>

<template>
  <!-- <div v-html="innerhtml" :[attr]="id"></div> -->
  <!-- <router-link to="/" activeClass="myActiveLink" exactActiveClass="myExactActiveLink"
    >首页</router-link
  >
  <router-link to="/todo">待办</router-link>
  <router-link to="/login">登录</router-link> -->
  <router-view></router-view>

  <!-- <div class="aa" title="lllll" id="kk">
    <p>d</p>
    <div>
      <p>u</p>
    </div>
  </div> -->
  <!-- <router-view name="LeftSidebar" />
  <router-view />
  <router-view name="RightSidebar" /> -->
</template>

<style scoped>
.myActiveLink {
  color: gray;
}
.myExactActiveLink {
  color: red;
}

.router-link-active {
  color: gray;
}
.router-link-exact-active {
  color: red;
}
.aa > p {
  color: red;
}

header {
  /* display: none;
  visibility: hidden;
  opacity: 0; */
  /* position: relative; */
  line-height: 1.5;
  max-height: 100vh;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}
nav a.router-link-active {
  color: aqua;
}
nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: -1rem;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}

.classa {
  background: gray;
}
</style>
